<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    response.setHeader("cache-control","public");
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    String base = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
%>
<!DOCTYPE html>
<html>
<!-- 创建试卷第一步 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/paperMng.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/exam-org-deta.css"/>
    <link rel="stylesheet" href="<%=path%>/static/select/bootstrap-select.css">
    <!--bootstrap基础引用 start-->
    <script type="text/javascript" src="<%=path%>/static/jstreeview/bootstrap/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/bootstrap.min.js"></script>
    <!--bootstrap基础引用 end-->
    <!--bootstrap-dialog start-->
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.css">
    <script type="text/javascript" src="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
    <!--bootstrap-dialog end-->
    <style>
        .setboeder {
            min-height: 370px;
            width: 347px;
        }
        .depoimg {
            margin-top: 15px;
            height: 372px;
            width: 310px
        }
        .setword {
            height: 30px !important;
        }
        .bootstrap-select > .btn {
            width: 140%;
        }
        .sz-box-sz{
            height: 80px !important;
        }
        .sz-btn-sz {
            border-color: #4c4ca6;
            width: 141px;
        }

    </style>
    <script src="<%=path%>/static/js/practice/textarea.js"></script>
    <script type="text/javascript" src="<%=path%>/static/select/bootstrap-select.js"></script>
</head>
<body>
<!--head begin-->
<jsp:include page="../head.jsp" flush="true"/>
<!--head end-->
<!--body begin-->
<div class="main-container">
    <div class="container body-box">
        <div class="title-top" style="background: #4c4ca6;">
            <p>${title}——<span class="rcolor">试卷配置</span></p>
            <a href="javascript:history.go(-1);" class="retun"><i class="glyphicon glyphicon-arrow-left"></i>返回</a>
        </div>
        <div class="paper-content position_ab">
            <div class="outcontent">
                <!--步骤 begin-->
                <div class="border_line">
                    <div id="fuelux-wizard" class="row-fluid" data-target="#step-container">
                        <ul class="wizard-steps">
                            <li class="nav_active">
                                <span class="step">1</span>
                                <span class="title">试卷基本信息</span>
                            </li>
                            <li>
                                <span class="step">2</span>
                                <span class="title">试卷配置信息</span>
                            </li>
                            <li>
                                <span class="step">3</span>
                                <span class="title">试卷发布</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--步骤 end-->
                <!--试卷基本信息 begin-->
                <div class="text-paper">
                    <div class="input-group input-group-lg paper-input">
                        <span class="input-group-addon">试卷名称</span>
                        <input id="title" type="text" value="${paper.title}" maxlength="30" class="form-control"
                               style="color:#999;"/>
                    </div>
                    <div class="input-group input-group-lg paper-input">
                        <span class="input-group-addon">试卷总分</span>
                        <input id="score" type="text" value="${paper.score}" maxlength="3" class="form-control"
                               style="color:#999;"/>
                    </div>
                    <div class="input-group input-group-lg paper-textarea">
                        <span class="input-group-addon">试卷简介</span>
                        <textarea id="textarea" type="text" class="form-control" maxlength="200"
                                  style="color:#999;overflow-y:visible"
                                  placeholder="请输入试卷所使用的题库、针对的知识点以及主要考试人员等试卷简要介绍信息"></textarea>
                        <script>
                            var text = document.getElementById("textarea");
                            autoTextarea(text);// 调用
                            text.append('${paper.paperinfo}'); // 在对象末尾处加入内容
                        </script>
                    </div>
                </div>
                <div class="bottom-paper">
                    <div class="input-group input-group-lg paper-input">
                        <span class="input-group-addon">题库设置</span>
                        <input type="text" id="deponame" readonly="readonly" placeholder="请从下列题库中选择本试卷所用题库类型"
                               class="form-control" style="color:#999;"/>
                    </div>
                    <div id="exambox" class="row">
                        <c:forEach items="${list}" var="depository" varStatus="status">
                            <div class="col-lg-3 col-md-3 setboeder" style="margin-left:14px;padding-bottom: 15px;">
                                <img class="depoimg" src="<%=basePath %>${depository.picture}">
                                <p class="setword">${depository.name}</p>
                                <img class="duigou" src="<%=path%>/static/images/examMng/paper-right.png">
                                <input type="text" value="${depository.id}" style="display: none;"/>
                                <select  id="selectpicker${depository.id}" class="selectpicker"  multiple
                                         data-live-search="true">
                                    <c:forEach items="${depository.contentlist}" var="content" varStatus="status">
                                        <option value="${content.contentid}">${content.title}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <!--试卷基本信息 end-->
                <div class="btnbox">
                    <a class="btn btn-danger" href="<%=path%>/paper/pagedata"><i class="glyphicon glyphicon-remove"></i>取消</a>
                    <a class="btn btn-info click_loading" onclick="next()" style="color: #FFFFFF">下一步
                        <i class="glyphicon glyphicon-arrow-right" style="margin-right: 0;"></i></a>
                </div>
            </div>
            <div class="loading_bg">
                <img src="<%=path%>/static/images/loading.gif">
                <p>加载中，请稍后...</p>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="myModal">
    <div class="modal-dialog" style="width:320px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">请选择组卷方式</h4>
            </div>
            <div id="content" class="modal-body sz-box-sz">
                <div class="btn btn-info margintopbom sz-btn-sz" onclick="goNext('hand')">
                    <span style="color: #FFFFFF; border-color: #4c4ca6"> 手动 </span>
                </div>
                <div class="btn btn-info margintopbom sz-btn-sz" onclick="goNext('auto')">
                    <span style="color: #FFFFFF; border-color: #4c4ca6"> 自动 </span>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--body end-->


<script type="text/javascript">
    //题库点击事件
    var depoid = "";
    var extend = "";
    $(document).ready(function () {

        // 试卷管理
        if (${role eq 'master'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else if (${role eq 'trainee'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else {
            $('#topMain').children().eq(4).addClass('active'); // 追加样式;
        }

        $(".selectpicker").selectpicker({
            noneSelectedText: '请选择' //默认显示内容  
        });

        $("#exambox div").click(function () {
            var num = $(this).index();
            var nums = $("#exambox div").length;
            for (var i = 0; i < nums; i++) {
                if (i == num) {
                    $("#exambox").children().eq(num).css("border", "1px solid #66ccff");
                    $("#exambox").children().eq(num).find(".duigou").css("display", "block");
                    var text = $("#exambox").children().eq(num).find(".setword").text();
                    $("#deponame").val(text);
                    depoid = $("#exambox").children().eq(num).find("input").val();
                    extend = $("#exambox").children().eq(num).find("select").val();

                } else {
                    $("#exambox").children().eq(i).css("border", "1px solid #ccc");
                    $("#exambox").children().eq(i).find(".duigou").css("display", "none");
                }
            }
        });

        var i = -1;
        $(".setboeder").each(function () {
            i = i + 1;
            var valueid = $(this).find('input').val();
            var depositoryid = '${paper.depository_id}';
            if (valueid == depositoryid) {
                $("#exambox").children().eq(i).css("border", "1px solid #66ccff");
                $("#exambox").children().eq(i).find(".duigou").css("display", "block");
                var text = $("#exambox").children().eq(i).find(".setword").text();
                $("#deponame").val(text);
                depoid = $("#exambox").children().eq(i).find("input").val();
                $("#exambox").children().eq(i).find("select").val('${paper.extend}');

            }
        });

        var str = "${paper.extend}";
        var arr = str.split(',');
        $('#selectpicker' + depoid).selectpicker('val', arr);
        $('#selectpicker' + depoid).selectpicker('render');
    })

    function next() {
        var contentArray = $('#selectpicker' + depoid).selectpicker('val');
        if (contentArray == null || contentArray.length == 0) {
            BootstrapDialog.confirm({
                title : '提示',
                message : '请选择知识点',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定',
                callback:function(result){
                    $('#myModal').modal('hide');
                }
            });
            return false;
        } else {
            extend = contentArray.join(",");
            var flag = '${paper.method}';
            if (flag!="") {
                goNext(flag)
            } else {
                $("#myModal").modal();
            }
        }
    }
    function goNext(flag) {

        var title = $("#title").val();
        var score = $("#score").val();
        var paperinfo = $("#textarea").val();
        var regular = /^([0-9]*)$/;
        if (depoid == '') {
            BootstrapDialog.confirm({
                title : '提示',
                message : '请选择题库',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定',
                callback:function(result){
                    $('#myModal').modal('hide');
                }
            });
            return false;
        }
        if (title == "") {
            BootstrapDialog.confirm({
                title : '提示',
                message : '试卷名称不能为空',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定',
                callback:function(result){
                    $('#myModal').modal('hide');
                }
            });
            return false;
        }
        if (score == "") {
            BootstrapDialog.confirm({
                title : '提示',
                message : '试卷总分不能为空',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定',
                callback:function(result){
                    $('#myModal').modal('hide');
                }
            });
            return false;
        }
        if (score < 0) {
            BootstrapDialog.confirm({
                title : '提示',
                message : '试卷总分不能小于0分',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定',
                callback:function(result){
                    $('#myModal').modal('hide');
                }
            });
            return false
        }
        if (!regular.test(score)) {
            BootstrapDialog.confirm({
                title : '提示',
                message : '试卷总分输入不符合',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定',
                callback:function(result){
                    $('#myModal').modal('hide');
                }
            });
            return false
        }
        if (paperinfo == "") {
            BootstrapDialog.confirm({
                title : '提示',
                message : '试卷简介不能为空',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定',
                callback:function(result){
                    $('#myModal').modal('hide');
                }
            });
            return false;
        }
        $.ajax({
            url: '<%=basePath%>paper/save',
            data: {
                id: '${paper.id}',
                title: title,
                score: score,
                depository_id: depoid,
                paperinfo: paperinfo,
                method: flag,
                extend: extend
            },
            dataType: "json",
            success: function (data, status) {
                var myForm = document.createElement("form");
                myForm.method = "post";
                if (flag == 'hand') {
                    myForm.action = "<%=path%>/paper/handdeploy";
                } else {
                    myForm.action = "<%=path%>/paper/autodeploy";
                }
                var myInput = document.createElement("input");
                myInput.setAttribute("name", "id");  // 为input对象设置name
                myInput.setAttribute("value", data[0].id);  // 为input对象设置value
                myForm.appendChild(myInput);
                document.body.appendChild(myForm);
                myForm.submit();
                document.body.removeChild(myForm); // 提交后移除创建的form
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                BootstrapDialog.confirm({
                    title : '提示',
                    message : '系统错误',
                    size : BootstrapDialog.SIZE_SMALL,
                    type : BootstrapDialog.TYPE_DEFAULT,
                    closable : true,
                    btnCancelLabel : '取消',
                    btnOKLabel : '确定',
                    callback:function(result){
                        $('#myModal').modal('hide');
                    }
                });
            }
        });
    }
</script>
</body>
</html>
